<template>
  <el-dialog
    :title="dialogTitle"
    :visible="dialogVisible"
    @close="closeDialogByClose"
  >
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-if="liturgicalTabShow"
        label="礼拜制"
        name="liturgical"
      >
        <el-form
          ref="liturgicalForm"
          inline
          :model="liturgicalData"
          :rules="liturgicalRules"
          label-width="120px"
        >
          <el-form-item
            label="工作模式名称:"
            prop="name"
          >
            <el-input v-model="liturgicalData.name"></el-input>
          </el-form-item>
          <el-row>
            <el-form-item
              label="连续工作天数:"
              style="margin-bottom: 0px;"
              prop="weekList"
            >
              <el-checkbox-group v-model="liturgicalData.weekList">
                <el-checkbox label="周一"></el-checkbox>
                <el-checkbox label="周二"></el-checkbox>
                <el-checkbox label="周三"></el-checkbox>
                <el-checkbox label="周四"></el-checkbox>
                <el-checkbox label="周五"></el-checkbox>
                <el-checkbox label="周六"></el-checkbox>
                <el-checkbox label="周日"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <div class="tips">
            选中为工作时间，未选中为休息时间
          </div>
          <el-form-item
            label="工作时间:"
            prop="workMinute"
          >
            <el-time-picker
              v-model="liturgicalData.workMinute"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              @change="handleDate"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-row
              style="width: 660px;"
              type="flex"
              justify="center"
            >
              <el-button
                type="warning"
                style="width: 90px;"
                @click="onSubmit"
              >确认</el-button>
              <el-button
                plain
                @click.native="closeDialog"
              >取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        v-if="continuousTabShow"
        label="连续制"
        name="continuous"
      >
        <el-form
          ref="continuousForm"
          inline
          :model="continuousData"
          :rules="continuousRules"
          label-width="120px"
        >
          <el-form-item
            label="工作模式名称:"
            prop="name"
          >
            <el-input v-model="continuousData.name"></el-input>
          </el-form-item>
          <el-form-item
            label="连续工作天数:"
            prop="workDayNum"
          >
            <el-row
              type="flex"
              justify="center"
              :gutter="10"
            >
              <el-form-item prop="workDayNum">
                <el-col :span="4">上</el-col>
                <el-col :span="20">
                  <el-input
                    v-model="continuousData.workDayNum"
                    type="text"
                    placeholder="请输入"
                  >
                    <template slot="suffix">天</template>
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item prop="restDayNum">
                <el-col :span="4">下</el-col>
                <el-col :span="20">
                  <el-input
                    v-model="continuousData.restDayNum"
                    type="text"
                    placeholder="请输入"
                  >
                    <template slot="suffix">天</template>
                  </el-input>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form-item>

          <el-form-item
            label="工作时间:"
            prop="workMinute"
          >
            <el-time-picker
              v-model="continuousData.workMinute"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              @change="handleDate"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-row
              style="width: 660px;"
              type="flex"
              justify="center"
            >
              <el-button
                type="warning"
                style="width: 90px;"
                @click="onConSubmit"
              >确认</el-button>
              <el-button
                plain
                @click.native="closeDialog"
              >取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { addWorkHistory, workHistoryInfo, updateWorkHistory } from '@/api/transit'
export default {
  name: 'WorkArrangeSettingDialog',
  props: {
    // dialogVisible: {
    //   type: Boolean,
    //   default: false
    // },
    dialogTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      activeName: 'liturgical',
      liturgicalData: {
        name: '',
        workPatternType: '1',
        weekList: [],
        workMinute: [
          new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 9, 0).getTime(),
          new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 18, 0).getTime()
        ]
      },
      continuousData: {
        name: '',
        workDayNum: null,
        restDayNum: null,
        workPatternType: '2',
        workMinute: [
          (new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 9, 0).getTime()),
          (new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 18, 0).getTime())
        ]
      },
      liturgicalRules: {
        name: [{ required: true, message: '工作模式名称不能为空', trigger: 'blur' }],
        weekList: [{ required: true, message: '连续工作天数不能为空', trigger: 'blur' }],
        workMinute: [{ required: true, message: '工作时间不能为空', trigger: 'blur' }]
      },
      continuousRules: {
        name: [{ required: true, message: '工作模式名称不能为空', trigger: 'blur' }],
        workDayNum: [{ required: true, message: '请填写连续工作天数', trigger: 'blur' }],
        restDayNum: [{ required: true, message: '请填写连续工作天数', trigger: 'blur' }],
        workMinute: [{ required: true, message: '工作时间不能为空', trigger: 'blur' }]
      },
      liturgicalTabShow: true,
      continuousTabShow: true
    }
  },

  methods: {
    handleDate(arr) {
      if (this.liturgicalData.workPatternType === '1') {
        this.liturgicalData.workMinute[0] = Date.parse(arr[0])
        this.liturgicalData.workMinute[1] = Date.parse(arr[1])
      } else {
        this.continuousData.workMinute[0] = Date.parse(arr[0])
        this.continuousData.workMinute[1] = Date.parse(arr[1])
      }
    },
    transTime(timestamp) {
      const date = new Date(timestamp)
      const hour = date.getHours() * 60
      const minute = date.getMinutes()
      return hour + minute
    },
    closeDialogByClose() {
      this.$emit('closeDialog')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    handleClick(tab) {
      tab.label === '礼拜制' ? this.liturgicalData.workPatternType = '1' : this.continuousData.workPatternType = '2'
    },
    getWeek(weekList) {
      const week = {
        monday: '',
        tuesday: '',
        wednesday: '',
        thursday: '',
        friday: '',
        saturday: '',
        sunday: ''
      }
      weekList.includes('周一') ? week.monday = 1 : week.monday = 2
      weekList.includes('周二') ? week.tuesday = 1 : week.tuesday = 2
      weekList.includes('周三') ? week.wednesday = 1 : week.wednesday = 2
      weekList.includes('周四') ? week.thursday = 1 : week.thursday = 2
      weekList.includes('周五') ? week.friday = 1 : week.friday = 2
      weekList.includes('周六') ? week.saturday = 1 : week.saturday = 2
      weekList.includes('周日') ? week.sunday = 1 : week.sunday = 2
      return week
    },
    transWeek(monday,
      tuesday,
      wednesday,
      thursday,
      friday,
      saturday,
      sunday) {
      const obj = {
        monday,
        tuesday,
        wednesday,
        thursday,
        friday,
        saturday,
        sunday
      }
      const arr = Object.keys(obj)
      if (arr.includes('monday') & monday === 1) this.liturgicalData.weekList.push('周一')
      if (arr.includes('tuesday') & tuesday === 1) this.liturgicalData.weekList.push('周二')
      if (arr.includes('wednesday') & wednesday === 1) this.liturgicalData.weekList.push('周三')
      if (arr.includes('thursday') & thursday === 1) this.liturgicalData.weekList.push('周四')
      if (arr.includes('friday') & friday === 1) this.liturgicalData.weekList.push('周五')
      if (arr.includes('saturday') & saturday === 1) this.liturgicalData.weekList.push('周六')
      if (arr.includes('sunday') & sunday === 1) this.liturgicalData.weekList.push('周日')
    },
    processWorkMinute(workMinute) {
      const startHour = +workMinute[0].substr(0, 2) * 60
      const startMin = +workMinute[0].substr(2, 4)
      const endHour = +workMinute[1].substr(0, 2) * 60
      const endMin = +workMinute[1].substr(2, 4)
      return {
        workStartMinute1: startHour + startMin,
        workEndMinute1: endHour + endMin
      }
    },
    transWorkMinute(workStartMinute1, workEndMinute1, workPatternType) {
      const startMin = workStartMinute1 % 60
      const endMin = workEndMinute1 % 60
      const startHour = (workStartMinute1 - startMin) / 60 < 10 ? `0${(workStartMinute1 - startMin) / 60}` : ((workStartMinute1 - startMin) / 60).toString()
      const endHour = (workEndMinute1 - endMin) / 60 < 10 ? `0${(workEndMinute1 - endMin) / 60}` : ((workEndMinute1 - endMin) / 60).toString()
      const workMinute = []
      workMinute[0] = startHour + (startMin < 10 ? `0${startMin}` : startMin.toString())
      workMinute[1] = endHour + (endMin < 10 ? `0${endMin}` : endMin.toString())
      if (workPatternType === 1) {
        this.liturgicalData.workMinute = workMinute
      } else if (workPatternType === 2) {
        this.continuousData.workMinute = workMinute
      }
    },
    async getWorkHistoryInfo(id, workPatternType) {
      if (workPatternType === 1) {
        this.activeName = 'liturgical'
        this.liturgicalData.workPatternType = '1'
        this.continuousTabShow = false
        this.liturgicalTabShow = true
        const { data: res } = await workHistoryInfo(id)
        const {
          name,
          monday,
          tuesday,
          wednesday,
          thursday,
          friday,
          saturday,
          sunday,
          workStartMinute1,
          workEndMinute1 } = res
        this.transWeek(monday,
          tuesday,
          wednesday,
          thursday,
          friday,
          saturday, sunday)
        this.transWorkMinute(workStartMinute1, workEndMinute1, workPatternType)
        this.liturgicalData.name = name
        this.liturgicalData.id = id
        this.transStringTimeToTime(workPatternType)
      } else if (workPatternType === 2) {
        this.activeName = 'continuous'
        this.continuousData.workPatternType = '2'
        this.liturgicalTabShow = false
        this.continuousTabShow = true
        const { data: res } = await workHistoryInfo(id)
        const { name, workStartMinute1, workEndMinute1, restDayNum, workDayNum } = res
        this.continuousData.name = name
        this.continuousData.id = id
        this.continuousData.restDayNum = +restDayNum
        this.continuousData.workDayNum = +workDayNum
        this.transWorkMinute(workStartMinute1, workEndMinute1, workPatternType)
        this.transStringTimeToTime(workPatternType)
      }
    },
    transStringTimeToTime(workPatternType) {
      if (+workPatternType === 1) {
        const newStartHour = Number(this.liturgicalData.workMinute[0].substr(0, 2)) < 10 ? this.liturgicalData.workMinute[0].substr(1, 1) : this.liturgicalData.workMinute[0].substr(0, 2)
        const newStartMin = Number(this.liturgicalData.workMinute[0].substr(2, 2)) < 10 ? this.liturgicalData.workMinute[0].substr(3, 1) : this.liturgicalData.workMinute[0].substr(2, 2)
        const newEndHour = Number(this.liturgicalData.workMinute[1].substr(0, 2)) < 10 ? this.liturgicalData.workMinute[1].substr(1, 1) : this.liturgicalData.workMinute[1].substr(0, 2)
        const newEndMin = Number(this.liturgicalData.workMinute[1].substr(2, 2)) < 10 ? this.liturgicalData.workMinute[1].substr(3, 1) : this.liturgicalData.workMinute[1].substr(2, 2)
        const newStartTime = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), +newStartHour, +newStartMin).getTime()
        const newEndTime = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), +newEndHour, +newEndMin).getTime()
        this.liturgicalData.workMinute = [newStartTime, newEndTime]
      } else if (+workPatternType === 2) {
        const newStartHour = Number(this.continuousData.workMinute[0].substr(0, 2)) < 10 ? this.continuousData.workMinute[0].substr(1, 1) : this.continuousData.workMinute[0].substr(0, 2)
        const newStartMin = Number(this.continuousData.workMinute[0].substr(2, 2)) < 10 ? this.continuousData.workMinute[0].substr(3, 1) : this.continuousData.workMinute[0].substr(2, 2)
        const newEndHour = Number(this.continuousData.workMinute[1].substr(0, 2)) < 10 ? this.continuousData.workMinute[1].substr(1, 1) : this.continuousData.workMinute[1].substr(0, 2)
        const newEndMin = Number(this.continuousData.workMinute[1].substr(2, 2)) < 10 ? this.continuousData.workMinute[1].substr(3, 1) : this.continuousData.workMinute[1].substr(2, 2)
        const newStartTime = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), +newStartHour, +newStartMin).getTime()
        const newEndTime = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), +newEndHour, +newEndMin).getTime()
        this.continuousData.workMinute = [newStartTime, newEndTime]
      }
    },
    onConSubmit() {
      this.$refs.continuousForm.validate(async valid => {
        if (valid) {
          if (this.dialogTitle !== '编辑工作模式') {
            if (this.continuousData.workPatternType === '2') {
              const { name, workPatternType } = this.continuousData
              const { workDayNum, restDayNum } = this.continuousData
              const workStartMinute1 = this.transTime(this.continuousData.workMinute[0])
              const workEndMinute1 = this.transTime(this.continuousData.workMinute[1])
              await addWorkHistory({ name, workPatternType, workDayNum, restDayNum, workStartMinute1, workEndMinute1 })
              this.$message.success('操作成功!')
            }
          } else {
            if (this.continuousData.workPatternType === '2') {
              const { id, name, workPatternType, workDayNum, restDayNum } = this.continuousData
              const workStartMinute1 = this.transTime(this.liturgicalData.workMinute[0])
              const workEndMinute1 = this.transTime(this.liturgicalData.workMinute[1])
              await updateWorkHistory({ id, name, workPatternType, workDayNum, restDayNum, workStartMinute1, workEndMinute1 })
              this.$message.success('修改成功!')
            }
          }
          this.closeDialogByClose()
          this.$emit('render')
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },
    onSubmit() {
      this.$refs.liturgicalForm.validate(async valid => {
        if (valid) {
          if (this.dialogTitle !== '编辑工作模式') {
            if (this.liturgicalData.workPatternType === '1') {
              const { name, workPatternType } = this.liturgicalData
              const week = this.getWeek(this.liturgicalData.weekList)
              // const workMinute = this.processWorkMinute(this.liturgicalData.workMinute)
              const workStartMinute1 = this.transTime(this.liturgicalData.workMinute[0])
              const workEndMinute1 = this.transTime(this.liturgicalData.workMinute[1])
              await addWorkHistory({ name, workPatternType, workStartMinute1, workEndMinute1, ...week })
              this.$message.success('操作成功!')
            }
          } else {
            if (this.liturgicalData.workPatternType === '1') {
              const { id, name, workPatternType } = this.liturgicalData
              const week = this.getWeek(this.liturgicalData.weekList)
              // const workMinute = this.processWorkMinute(this.liturgicalData.workMinute)
              const workStartMinute1 = this.transTime(this.liturgicalData.workMinute[0])
              const workEndMinute1 = this.transTime(this.liturgicalData.workMinute[1])
              await updateWorkHistory({ id, name, workPatternType, workStartMinute1, workEndMinute1, ...week })
              this.$message.success('修改成功!')
            }
          }
          this.closeDialogByClose()
          this.$emit('render')
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .tips {
  margin-left: 120px;
  margin-bottom: 14px;
  color: #bac0cd;
}

/deep/ .el-checkbox {
  margin-right: 10px;
}

/deep/ .el-tabs__item {
  color: #20232a;
  font-size: 14px;
}

/deep/ .el-tabs__item:hover {
  color: #20232a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/deep/ .el-tabs__item.is-active {
  color: #20232a;
  font-size: 16px;
  font-weight: 700;
}

/deep/ .el-tabs__active-bar {
  background-color: #e15536;
}
</style>
